<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="p">1234567890</p>
    <!-- <input type="text" id="input" />
    <button id="id" onclick="clipboardData(this)">clipboardData</button>
    <br /> -->
    <input type="text" id="output" />
    <button onclick="getClipboardData(this)">pasteData</button>
    <script>
      async function getClipboardData() {
        try {
          const { clipboard } = navigator;
          const text = await clipboard.readText();
          console.log(text);
        } catch (error) {
          console.error("读取剪贴板失败:", error);
        }
      }
      //   //写入剪切板
      //   function clipboardData() {
      //     const inputElement = document.querySelector("#input");
      //     inputElement.select();
      //     document.execCommand("copy");
      //   }
      //   //
      //   function pasteData() {
      //     const pasteText = document.querySelector("#output");
      //     pasteText.focus();
      //     document.execCommand("paste");
      //   }
      const sb = document.createElement("button");
      sb.id = "clipSearchBtn";
      sb.innerHTML = "CLIPBOARD";
      $("#form").append(sb);
      $("#clipSearchBtn").css({
        width: "100px",
        height: "40px",
        border: "none",
        color: "white",
        cursor: "pointer",
        "border-left": "0.5px solid #fff",
        "border-top-right-radius": "7px",
        "border-bottom-right-radius": "7px",
        background:
          "linear-gradient(132deg, rgb(47 9 202 / 58%),rgb(9 212 232))",
      });
      async function getClipboardData() {
        try {
          const { clipboard } = navigator;
          const text = await clipboard.readText();
          console.log(text);
          $("#kw").val(text);
          setTimeout(() => {
            $("#su").click();
          }, 0);
        } catch (error) {
          console.error("读取剪贴板失败:", error);
        }
      }
      $("#clipSearchBtn").on("click", getClipboardData);

      const content = document.getElementById("content_right");

      const config = { attributes: false, childList: true, subtree: false };

      // 当观察到突变时执行的回调函数
      const callback = function (mutationsList) {
        const targetElement = mutationsList[0].target.children[0];
        if (targetElement) {
          $("#content_right").remove();
        }
      };

      // 创建一个链接到回调函数的观察者实例
      const observer = new MutationObserver(callback);

      // 开始观察已配置突变的目标节点
      observer.observe(content, config);
    </script>
  </body>
</html>
